<template>
  <div>
    <el-card shadow="never">
      <header-title title="健康证列表"></header-title>
    </el-card>
    <el-card shadow="never">
      <el-row>
        <el-col :span="12">
          <div style="line-height: 32px;">健康证列表</div>
        </el-col>
        <el-col :span="12">
          <el-button @click="add" class="button" size="small" round>添加健康证</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <div>
        <el-table :data="healthData" v-loading="loading" style="width: 100%">
          <el-table-column prop="businessName" label="商户名称"></el-table-column>
          <el-table-column prop="healthId" label="健康证id"></el-table-column>
          <el-table-column prop="healthName" label="健康证持有人"></el-table-column>
          <el-table-column prop="healthPhoto" label="健康证图片"></el-table-column>
          <el-table-column prop="healthDate" label="健康证有限期"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="healthEdit(scope.row)" type="text" style="color:#55b7ff;">编辑</el-button>
              <el-button @click="healthDelete(scope.row)" type="text" style="color:#f7674a;">删除</el-button>
              <el-button @click="healthDetails(scope.row)" type="text" style="color:#3dc2c2;">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-size="perPage"
          :current-page="page"
          :total="total"
          @current-change="changeHealthPage"
          style="margin-top: 15px;"
          background
          layout="prev, pager, next"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog title="添加健康证" :visible.sync="healthDialog" @close="close">
      <div>
        <el-form :model="modal" label-width="150px">
          <el-form-item label="商户名称：" prop="businessName">
            <el-input v-model="modal.businessName"></el-input>
          </el-form-item>
          <el-form-item label="健康证持有人：" prop="healthName">
            <el-input v-model="modal.healthName"></el-input>
          </el-form-item>
          <el-form-item label="健康证照片：" prop="healthPhoto">
            <el-input v-model="modal.healthPhoto"></el-input>
            <MyUpload></MyUpload>
          </el-form-item>
          <el-form-item label="健康证有效期：" prop="healthDate">
            <el-input v-model="modal.healthDate"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">提交健康证</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import HeaderTitle from "@/components/HeaderTitle"
import MyUpload from "@/components/MyUpload"
import axios from 'axios'
export default {
  name: 'HealthList',
  components: {
     HeaderTitle,
     MyUpload
  },
  data(){
    return {
      loading: true,
      healthDialog: false,
      healthData: [],
      perPage: 10, // 每页显示10条
      page: 1, // 当前页
      total: 0,
      businessId: 0,
      modal: {
        businessId: 0, //	int	true	商户ID
        businessName: '', //	string	true	商户名称
        healthName: '', //	string	true	健康证持有人
        healthPhoto: '', //	string	true	健康证照片
        healthDate: '' //	string	true	健康证有效期
      },
      uptoken: '',
      domain: ''
    }
  },
  watch: {
    '$store.state.app.marketId'(val, oldVal){
      this.getHealthList(this.businessId, this.perPage, this.page)
    }
  },
  mounted(){
    const query = this.$route.query
    this.businessId = query.businessId
    this.getHealthList(query.businessId, this.perPage, this.page)

    axios.request(
      {
        url: process.env.VUE_APP_BASE_API + '/api/qiniu/uptoken',
        method: 'post'
      }
    ).then(res => {
      this.uptoken = res.data.data.uptoken
      this.domain = 'http://' + res.data.data.domain
    })
  },
  methods:{
    changeStatus(val){
      this.status = val
    },
    // 获取商户列表
    getHealthList(businessId,perPage,page){
      this.$store.dispatch('business/fetchHealthList',{businessId,perPage,page}).then(
        data => {
          this.loading = false
          this.healthData = data.items
          this.total = data.total
        }
      ).catch(err => {
        this.loading = false
        this.healthData = []
        this.total = 0
      })
    },
    search(){
      this.page = 1
      this.getHealthList(this.businessId, this.perPage, this.page)
    },
    changeHealthPage(num){
      this.page = num
      this.getHealthList(this.businessId, this.perPage, num)
    },
    // 点击填写商户信息
    add(){
      this.healthDialog = true
    },
    close(){
      this.clear()
    },
    clear(){
      this.modal = {}
    },
    // 提交商户信息
    submit(){
      console.log(this.modal)
      // return
      this.healthDialog = false
      this.$store.dispatch("business/submitHealth", this.modal).then(data=>{
        console.log(data)
        // this.$message({
        //   type: 'success',
        //   message: '操作成功，请刷新！'
        // })
      })
    },
    // 编辑
    healthEdit(row){
      console.log(row)
    },
    // 详情
    healthDetails(row){
      console.log(row)
    },
    // 删除
    healthDelete(row){
      console.log(row)
    }
  }
}
</script>

<style lang="scss" scoped>
.button {
  background: #64d9d6;
  color: #fff;
  margin-left: 40px;
}
</style>
